<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>小键盘原型</title>
        <style>
            .setup-item input {
                width: 50px;
            }
            .setup-item textarea {
                margin-top: 20px;
                width: 450px;
                height: 200px;
            }
            #keyboard button {
                width: 50px;
                height: 50px;
            }
        </style>
    </head>
    <body>
        <section id="setup" alt="配置工具">
            <div class="setup-item">
                <span>键盘尺寸：<input type="text" id="kbsize" value="8" /> <button id="setsize">写入配置</button></span>
                <span>添加键：<input type="text" id="newkey" value="" /> <button id="addkey">写入配置</button></span>
            </div>
            <div class="setup-item"><textarea id="json-conf"></textarea></div>
        </section>
        <hr />
        <section id="test" alt="测试工具">
            <div id="form" alt="模拟要输入的表单">
                <div><label for="test-input1">填表项1 </label><input type="text" id="test-input1" /></div>
                <div><label for="test-input2">填表项2 </label><input type="text" id="test-input2" /></div>
                <div><label for="test-input3">填表项3 </label><input type="text" id="test-input3" /></div>
                <div><label for="test-input4">填表项4 </label><input type="text" id="test-input4" /></div>
                <div class="setup-item"><button id="kbrender">渲染键盘</button></div>
            </div>
            <table id="keyboard" alt="模拟渲染出来的键盘"></table>
        </section>
    </body>
    <script>
        let conf = {},
            lastFocusedElement;
        //监听blur事件，点击键透的时候知道焦点从哪个输入位置离开
        document.addEventListener(
            "blur",
            function (event) {
                lastFocusedElement = event.target;
            },
            true
        );

        document.querySelector("#setsize").addEventListener("click", () => updateConfig("size", document.querySelector("#kbsize").value));
        document.querySelector("#addkey").addEventListener("click", () => updateConfig("key", document.querySelector("#newkey").value));
        document.querySelector("#kbrender").addEventListener("click", () => {
            let keyboard = document.querySelector("#keyboard"),
                keyconf = JSON.parse(document.querySelector("#json-conf").value || '{"size":8,"key":[]}'),
                rownum = Math.ceil(keyconf.key.length / keyconf.size);

            keyboard.innerHTML = "";
            for (let i = 0; i < rownum; i++) {
                let tr = document.createElement("tr");
                for (let j = 0; j < keyconf.size; j++) {
                    let td = document.createElement("td"),
                        key = keyconf.key[i * keyconf.size + j];
                    td.innerHTML = key === undefined ? "" : `<button>${key}</button>`;
                    tr.appendChild(td);
                }
                keyboard.appendChild(tr);
            }
        });

        document.querySelector("#keyboard").addEventListener("click", (e) => {
            if (e.target.tagName === "BUTTON") {
                if (lastFocusedElement.tagName === "INPUT") {
                    lastFocusedElement.value += e.target.textContent;
                    lastFocusedElement.focus();
                }
            }
        });
        
        function updateConfig(item, value) {
            conf = JSON.parse(document.querySelector("#json-conf").value || '{"key":[]}');
            conf[item] = item === "size" ? value : [...conf[item], value || "空白"];
            document.querySelector("#json-conf").value = JSON.stringify(conf, "", 2);
        }
    </script>
</html>
